<template>
    <div id="china_map_box">
        <el-button type="primary" size="mini" class="back" @click="back" v-if="deepTree.length > 1">返回</el-button>
        <div class="echarts">
            <div id="map"></div>
        </div>
    </div>

</template>

<script lang="js" >
//引入echart和json数据
import * as echarts from 'echarts'
import { mapOption } from '../../../config/map/mapOption'
import { cityProvincesMap } from '../../../config/map/cityProvincesMap'


export default {
    name: 'Map',
    data() {
        return {
            currentName: '中国',
            city: '',
            chart: null,
            mapData: [], // 当前地图上的地区
            deepTree: [],// 点击地图时push，点返回时pop
            areaName: '中国', // 当前地名
            areaCode: '000000', // 当前行政区划
            areaLevel: 'country', // 当前级别
            option: { ...mapOption.basicOption }, // map的相关配置
            provincesMap: cityProvincesMap.provincesMap, // 省拼音，用于查找对应json
            areaMap: cityProvincesMap.areaMap, // 省行政区划，用于数据的查找，按行政区划查数据
            special: ["北京市", "天津市", "上海市", "重庆市", "香港", "澳门"],//直辖市和特别行政区-只有二级地图，没有三级地图
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initEcharts();
            this.chart.on('click', this.echartsMapClick);
        })
    },
    methods: {
        // 初次加载绘制地图
        initEcharts() {
            //地图容器
            let that = this
            this.chart = echarts.init(document.getElementById('map'));
            if (this.areaCode === '000000') {
                this.getChinaJson();
            } else {
                this.getProvinceJSON({ areaName: this.areaName, areaCode: this.areaCode })
            }
            window.onresize = function () {
                that.chart.resize();
            };
        },
        // 渲染
        renderMap(map, data) {
            this.option.series = [
                {
                    name: map,
                    map: map,
                    mapType: map,
                    ...mapOption.seriesOption,
                    data: data
                }
            ];
            //渲染地图
            this.chart.setOption(this.option, true); // true代表重新绘制
        },
        // 地图点击
        echartsMapClick(params) {
            this.currentName = params.name
            this.areaName = params.name;
            this.$emit('currentName', params.name)
            if (params.name in this.provincesMap) {
                this.areaCode = params.data.areaCode;
                this.areaLevel = params.data.areaLevel;
                //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
                this.getProvinceJSON(params.data);
            } else if (params.seriesName in this.provincesMap) {
                //     //如果是【直辖市/特别行政区】只有二级下钻
                if (this.special.indexOf(params.seriesName) >= 0) {
                    return;
                } else {
                    let city = {
                        areaCode: this.areaMap[params.name],
                        areaName: params.name
                    }
                    this.areaCode = this.areaMap[params.name];
                    //显示县级地图
                    this.getCityJSON(city)
                }
            } else {
                return;
            }

        },
        //绘制全国地图
        getChinaJson() {
            this.$axios({
                url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
                method: 'get'
            }).then(res => {
                let arr = [];
                for (let i = 0; i < res.data.features.length; i++) {
                    let obj = {
                        name: res.data.features[i].properties.name,
                        areaName: res.data.features[i].properties.name,
                        areaCode: res.data.features[i].properties.adcode,
                        areaLevel: 'province',
                        value: Math.round(Math.random()),
                    };
                    arr.push(obj)
                }
                this.mapData = arr;
                this.deepTree.push({
                    mapData: arr,
                    params: { name: 'china', areaName: 'china', areaLevel: 'country', areaCode: '000000' }
                });
                //注册地图
                echarts.registerMap('china', res.data);
                //绘制地图
                this.renderMap('china', arr);
            })

        },
        // 加载省级地图
        getProvinceJSON(params) {
            this.$axios({
                url: `https://geo.datav.aliyun.com/areas_v3/bound/${params.areaCode}_full.json`,
                method: 'get',
            }).then(res => {
                let arr = [];
                for (let i = 0; i < res.data.features.length; i++) {
                    let obj = {
                        name: res.data.features[i].properties.name,
                        areaName: res.data.features[i].properties.areaName,
                        areaCode: res.data.features[i].properties.areaCode,
                        areaLevel: res.data.features[i].properties.areaLevel,
                        value: Math.round(Math.random()),
                    };
                    arr.push(obj)
                }
                this.mapData = arr;
                this.deepTree.push({
                    mapData: arr,
                    params: params,
                });
                // 注册
                echarts.registerMap(params.areaName, res.data);
                // 绘制地图
                this.renderMap(params.areaName, arr);
            })

        },
        // 加载县级地图
        getCityJSON(params) {
            this.$axios({
                url: `https://geo.datav.aliyun.com/areas_v3/bound/${params.areaCode}_full.json`,
                method: 'get',
            }).then(res => {
                let arr = [];
                for (let i = 0; i < res.data.features.length; i++) {
                    let obj = {
                        name: res.data.features[i].properties.name,
                        areaName: res.data.features[i].properties.areaName,
                        areaCode: res.data.features[i].properties.areaCode,
                        areaLevel: res.data.features[i].properties.areaLevel,
                        value: Math.round(Math.random()),
                    };
                    arr.push(obj)
                }
                this.mapData = arr;
                this.deepTree.push({
                    mapData: arr,
                    params: params,
                });
                // 注册
                echarts.registerMap(params.areaName, res.data);
                // 绘制地图
                this.renderMap(params.areaName, arr);
            })
        },
        // 返回
        back() {
            if (this.deepTree.length > 1) {
                this.deepTree.pop();
                let areaName = this.deepTree[this.deepTree.length - 1].params.name;
                this.currentName = areaName
                let mapData = this.deepTree[this.deepTree.length - 1].mapData;
                this.renderMap(areaName, mapData);
                this.$emit('currentName', areaName)
            }
        }
    }
}

</script>

<style scoped lang="scss">
#china_map_box {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;

    .echarts {
        width: 0;
        flex: 1;

        // background-size: 100% 100%;
        #map {
            height: 100%;
        }
    }

    .back {
        position: absolute;
        top: 3rem;
        right: 2rem;
        z-index: 999;
        padding-left: .12rem;
        padding-right: .12rem;
        width: 3rem;
        height: 2rem;
    }
}
</style>
